<!-- 风险数量报表 -->
<template>
  <div>
    <t-card bordered hover-shadow>
      <t-row>
        <t-col :span="3">
          <h3 style="margin-bottom: 20px">风险数量统计</h3>
          <b style="font-size: 40px; color: #e34d59">{{ amount || 0 }}</b>
        </t-col>
        <t-col :span="9">
          <div><pie-chart id="risk" :dataList="dataList" :color="color" :radius="radius" /></div>
        </t-col>
      </t-row>
    </t-card>
  </div>
</template>

<script>
import PieChart from '@/components/PieChart/index.vue';

export default {
  name: 'RiskQuantity',
  components: { PieChart },
  props: {
    dataOption: {
      type: Object,
    },
  },
  data() {
    return {
      color: ['#c9353f', '#f36d78', '#f2995f', '#f9c74f'],
      radius: ['45%', '75%'],
    };
  },
  computed: {
    amount() {
      return Number(
        this.dataOption.seriousRs + this.dataOption.highRs + this.dataOption.middleRs + this.dataOption.lowRs,
      );
    },
    dataList() {
      return [
        { value: this.dataOption.seriousRs, name: '严重风险' },
        { value: this.dataOption.highRs, name: '高风险' },
        { value: this.dataOption.middleRs, name: '中风险' },
        { value: this.dataOption.lowRs, name: '低风险' },
      ];
    },
  },
};
</script>

<style></style>
